
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .banner{
            position: relative;
        }
        .banner,.banner li,.banner img {
            width:790px;
            height: 340px;
        }
        .banner ul li{
            position:absolute;
            list-style: none;
            display: none;
        }
    </style>
    <script src="js/jquery-3.1.1.js"></script>
</head>
<body>
    <div class="banner">
        <ul>
            <li style="left:0;display: block"><img src="//img20.360buyimg.com/da/jfs/t13660/11/2291193231/97115/a65e3b2/5a3a926aN4c4f2310.jpg" alt=""></li>
            <li><img src="//img1.360buyimg.com/da/jfs/t12298/290/2219103450/97241/bb1a374b/5a376188Nda283c27.jpg" alt=""></li>
            <li><img src="//img1.360buyimg.com/da/jfs/t12298/290/2219103450/97241/bb1a374b/5a376188Nda283c27.jpg" alt=""></li>
            <li><img src="//img12.360buyimg.com/babel/jfs/t12289/59/2404056524/136359/95a47ceb/5a3cbe83Neb579b0e.jpg" alt=""></li>
            <li><img src="//img1.360buyimg.com/da/jfs/t12352/41/2349526840/87437/cc8986d8/5a3b5792N6fa5c6b2.jpg" alt=""></li>
            <li><img src="//img14.360buyimg.com/babel/jfs/t14992/232/884504725/109908/b1a20371/5a3c7a96N33d93beb.jpg" alt=""></li>
       		<li><img src="//img10.360buyimg.com/babel/jfs/t16495/298/728541812/189212/ccf30bfd/5a3c6ba2N6b303cbe.jpg" alt="" /></li>
       		<li><img src="//img11.360buyimg.com/babel/jfs/t16012/230/767759625/91872/8d980e10/5a3c82f2N40ffa18f.jpg"/></li>
        </ul>
    </div>
    <script>
        $(function(){
            $(".banner").mouseover(function(){
                clearInterval(timer);
            });
            $(".banner").mouseout(function(){
                timer = setInterval(move,2000);
            });
            var i = 0;
            timer = setInterval(move,2000);
            function move(){
                i++;
                $(".banner ul li").eq(i).fadeIn(1000);//显示
                $(".banner ul li").eq(i).siblings().fadeOut(1000);//隐藏
                if(i==8){
                    i=0;
                }
            }
        })
    </script>
</body>
</html>